<%--
  Created by IntelliJ IDEA.
  User: 2815459449
  Date: 2025/1/4
  Time: 20:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
    <title>播放界面</title>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/index/index.css">
    <link rel="stylesheet"
          href="<%=request.getContextPath()%>/static/plugins/bootstrap-4.6.2-dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/static/css/play/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/static/css/play/play.css">
</head>
<body>
<div>
    <div class="container-fluid p-0">
        <div class="row">
            <!-- 顶部导航栏 -->
            <nav class="navbar navbar-expand-lg navbar-light bg-light w-100">
                <!-- logo -->
                <div class="navbar-header">
                    <a href="#"><img src="<%=request.getContextPath()%>/static/images/logo/shuji-logo.png" width="340px"
                                     height="58px"
                                     alt="Logo"></a>
                </div>
                <!-- 项目名 -->
                <a class="navbar-brand" href="#">音有尽有</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <!-- 具体导航栏 -->
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="<%=request.getContextPath()%>/index.jsp">首页<span
                                    class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"
                               href="<%=request.getContextPath()%>/musicBoxes/musicBoxes.jsp">音乐盒</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"
                               href="<%= request.getContextPath() %>/playlists/playlists.jsp">播放列表</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="<%= request.getContextPath() %>/play/songlists.jsp">歌曲列表</a>
                        </li>
                    </ul>
                </div>
                <!-- 搜索框 -->
                <%--                <form class="form-inline my-2 my-lg-0">--%>
                <%--                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">--%>
                <%--                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>--%>
                <%--                </form>--%>
                <!-- 登录注册按钮 -->
                <ul class="nav navbar-nav navbar-right">
                    <li><a style="font-size:16px;color:blueviolet;">&nbsp;${user.username }</a></li>
                    <!-- 用户个人中心 -->
                    <li class="dropdown">
                        <a href="<%=request.getContextPath()%>/user/personalCenter.jsp"><img
                                src="<%=request.getContextPath()%>${user.profilePicture}"
                                style="margin-top:-10px;width: 38px;height: 38px"
                                alt="Profile Picture"></a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="km_player_main" style="background-color: #f0f0f0;">
                <div id="audio-player">
                    <section class="audio-control">
							<span class="icon">
								<i class="fa fa-play" style="font-size:30px;"></i>
							</span>
                        <img src="<%=request.getContextPath()%>/img/play.jpg">
                    </section>
                    <section class="audio-detail">
                        <div class="info">
                            <h4>"${sessionScope.title}"</h4>
                        </div>

                        <div class="lyric">
                            <div id="song" style="display:none;">${sessionScope.lyrics}</div>
                        </div>
                    </section>
                    <section class="control-bar">
                        <audio autoplay preload="auto" src="${sessionScope.songUrl}" controls></audio>
                    </section>
                    <%-- <section class="control-bar">
                        <audio autoplay src="${url }" controls></audio>
                    </section> --%>
                </div>
            </div>
        </div>

        <div class="footer">
            <div class="footer-content">
                <p><a href="#" target="_blank"><img src="<%=request.getContextPath()%>/img/one_footer1.png" alt="音乐人入驻"/> 入驻成为音乐人</a></p>
                <p><img src="<%=request.getContextPath()%>/img/one_footer1.png" alt="联系我们"/> 联系我们：doudizhu@qq.com</p>
            </div>
        </div>
    </div>
</div>

<script src="<%=request.getContextPath()%>/static/plugins/jquery/jquery-1.8.3.js"></script>
<script src="<%=request.getContextPath()%>/static/plugins/bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
<script src="<%=request.getContextPath()%>/static/js/util.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/static/js/play/play.js"></script>
</body>

</html>
